<template>
  <div class="app-container">
    <div style="padding-bottom: 10px">
      <el-input v-model="search" style="width: 20%" placeholder="输入关键字查询">
        <i slot="prefix" class="el-input__icon el-icon-search"></i>
      </el-input>
      <el-button style="margin-left: 10px" type="primary" @click="load">查询</el-button>
      <el-button style="margin-left: 10px" type="primary" @click="add">新增</el-button>
      <!-- <el-button style="margin-left: 10px" type="primary" @click="exp">导出</el-button> -->
    </div>
    <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row>
      <el-table-column prop="name" label="名称"></el-table-column>
      <el-table-column prop="flag" label="标识"></el-table-column>

      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" circle @click="edit(scope.row)"></el-button>
          <el-popconfirm @confirm="del(scope.row.id)" title="确定删除？">
            <el-button type="danger" icon="el-icon-delete" circle slot="reference" style="margin-left: 10px"></el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <div style="padding: 10px 0">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-size="pageSize"
        :page-sizes="[1, 5, 10, 20]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>

    <!-- 弹窗   -->
    <el-dialog title="角色信息" :visible.sync="dialogFormVisible" width="30%" :close-on-click-modal="false">
      <el-form :model="entity" ref="ruleForm" :rules="rules">
        <el-form-item prop="name" label="名称" label-width="120px">
          <el-input v-model="entity.name" autocomplete="off" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item prop="flag" label="标识" label-width="120px">
          <el-input v-model="entity.flag" autocomplete="off" style="width: 80%"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import request from '@/utils/request'
let url = "/api/role/"

export default {
  data() {
    return {
      list: [],
      listLoading: true,
      dialogFormVisible: false,
      entity: {},
      pageNum: 1,
      pageSize: 10,
      total: 0,
      search: '',
      rules: {
        // name: [{ required: true, message: '', trigger: 'blur' }]
      },
      options: [],
    }
  },
  created() {
    this.load()
  },
  methods: {
    fileSuccessUpload(res) {  // 文件上传
      this.entity.file = "http://localhost:7788/files/" + res.data;
      this.entity.img = "http://localhost:7788/files/" + res.data;
    },
    changeState(obj, state) {  // 审核
        this.entity = JSON.parse(JSON.stringify(obj));
        this.entity.state = state;
        this.save();
    },
    exp() {   // excel 导出
        window.open(url + "export");
    },
    load() {
      this.listLoading = true
      request({
        url: url + 'page',
        method: 'get',
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          name: this.search
        }
      }).then((res) => {
        this.list = res.data.records
        this.total = res.data.total
        this.listLoading = false
      })

      // request({url: '/api/',method: 'get'}).then((res) => { this.options = res.data})
    },
    add() {
      this.entity = {}
      this.dialogFormVisible = true
      if(this.$refs['ruleForm']) {
        this.$refs['ruleForm'].resetFields()
      }
    },
    edit(data) {
      this.entity = JSON.parse(JSON.stringify(data))
      this.dialogFormVisible = true
      if(this.$refs['ruleForm']) {
        this.$refs['ruleForm'].resetFields()
      }
    },
    save() {
      const method = this.entity.id ? 'PUT' : 'POST'
      this.$refs['ruleForm'].validate(valid => {
        if (valid) {
          request({
            url: url,
            method: method,
            data: this.entity
          }).then((res) => {
            if (res.code === '0') {
              this.$message({
                type: 'success',
                message: '操作成功'
              })
            }
            this.load()
            this.dialogFormVisible = false
          })
        }
      })
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.load()
    },
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum
      this.load()
    },
    del(id) {
      request({
        url: url + id,
        method: 'DELETE'
      }).then((res) => {
        if (res.code === '0') {
          this.$message({
            type: 'success',
            message: '操作成功'
          })
        }
        this.load()
      })
    }
  }
}
</script>
